import React, { useRef, useEffect, useState } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import './home.scss'
import { initRem, px2rem } from '@/assets/global-style'

import { statusRecord } from '@/config'
import { fileToBase64, urlToBase64 } from '@/utils/ImageUtils'

import { useSelector, useDispatch } from 'react-redux'
import bg from '@/assets/images/map.png'

import DocExporter from './DocExporter'
import ExportWordComponent from './ExportWordComponent'
import DocTemplate from './DocTemplate'
import ParkingGuideSystem from './ParkingGuideSystem'

// 示例base64转换
function getBase64(url) {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.toDataURL('image/png')
      resolve(canvas.toDataURL().split(',')[1])
    }
    img.src = url
  })
}
console.log(
  getBase64(
    'http://testywpark.oss-cn-shenzhen.aliyuncs.com/monthapply/cer/40d80202-a051-4766-9514-35452d602690.jpg'
  )
)

export default function Home() {
  const dispatch = useDispatch()
  initRem() // 初始化rem
  const [docData, setDocData] = useState({})
  async function generateDocx() {
    let imgData = await getBase64(
      'http://testywpark.oss-cn-shenzhen.aliyuncs.com/monthapply/cer/40d80202-a051-4766-9514-35452d602690.jpg'
    )
    let data = {
      projectName: '年度报告',
      project: {
        a: 1,
        b: 2,
      },
      members: [
        { name: '张三', role: '开发' },
        { name: '李四', role: '测试' },
      ],
      images: {
        chart1: imgData,
        logo: imgData,
      },
    }
    setDocData(data)
  }

  let gid = SearchPage()
  function SearchPage() {
    const location = useLocation()
    const params = new URLSearchParams(location.search)
    const keyword = params.get('id') // 获取?q=xxx参数
    // console.log('SearchPage keyword:', keyword)
    return keyword
  }
  const data = {
    projectName: '年度报告',
    project: {
      a: 1,
      b: 2,
    },
    members: [
      { name: '张三', role: '开发' },
      { name: '李四', role: '测试' },
    ],
    images: {
      chart1: '',
      logo: '',
    },
  }
  const obtainData = {
    photo: { type: 'img', value: 'https://www.baidu.com/img/bd_logo1.png' },
    projectName: '年度报告',
    members: [
      { name: '张三', role: '开发' },
      { name: '李四', role: '测试' },
    ],
  }

  useEffect(() => {
    generateDocx()
  }, [])

  return (
    <>
      {/* <ParkingGuideSystem></ParkingGuideSystem> */}
      <div className="header">doc文档模板测试</div>
      <div className="content">
        <DocTemplate />
      </div>
      <DocExporter
        templatePath="/template.docx"
        outputName="项目报告"
        data={docData}
      />
      {/* <ExportWordComponent
        reportData={{
          reportTitle: '季度项目报告',
          author: '张经理',
          logoUrl: 'https://example.com/logo.png',
          projects: [
            {
              name: '前端重构',
              status: '已完成',
              owner: '王开发',
              progress: 100,
            },
            {
              name: '后端优化',
              status: '进行中',
              owner: '李架构',
              progress: 65,
            },
          ],
          risks: [{ description: '第三方接口延迟', level: '中等' }],
        }}
      /> */}
    </>
  )
}
